<template>
  <div class="container">
    <toolbar :back="true" :title="$route.meta.title"></toolbar>
    <ul class="_m-2">
      <router-link tag="li" :to="{path: '/users/edit/avator', query: {q: usersVo.avator}}"  class="p-2_ d-flex align-items-center justify-content-between border-bottom">
        <h2>头像</h2>
        <p>
          <img src="~assets/img/head.png" alt="" v-if="usersVo.avator == null">
          <img :src="usersVo.avator" alt="" v-else>
          <i class="cubeic-arrow"></i>
        </p>
      </router-link>
      <router-link tag="li" :to="{path: '/users/edit/nickName', query: {q: usersVo.nickName}}" class="p-2_ d-flex align-items-center justify-content-between border-bottom">
        <h2>昵称</h2>
        <p>{{usersVo.nickName}}
          <i class="cubeic-arrow"></i>
        </p>
      </router-link>
      <router-link tag="li" :to="{path: '/users/edit/sex', query: {q: usersVo.sex}}" class="p-2_ d-flex align-items-center justify-content-between border-bottom">
        <h2>性别</h2>
        <p>{{usersVo.sex}}
          <i class="cubeic-arrow"></i>
        </p>
      </router-link>
    </ul>
  </div>
</template>

<script>
import Toolbar from '../../../components/Toolbar'

import {getUsersForCache} from 'api/UsersApi'
export default {
  name: 'UsersInfoIndex',
  components: {
    Toolbar
  },
  data () {
    return {
      usersVo: {}
    }
  },
  methods: {
    getUsersForCache () {
      getUsersForCache({})
        .then(res => {
          if(res.meta.success) {
            this.usersVo = res.data
          }
        });
    }
  },
  created () {
    this.getUsersForCache();
  }
}
</script>

<style lang="stylus" scoped>
ul {
  background #FFF

  li {
    height $toolbar-height
    line-height $toolbar-height

    i {
      color #797979  
      margin-left 10px
    }

   img {
      width 30px
      height 30px
      border-radius 50%
    }
  }
}
</style>

